<template>
    <div>
        <!-- 搜索栏 -->
        <el-row style="margin-top: 20px;">
            <el-col :span="4">
                <el-input placeholder="请输入内容" v-model="input" clearable>
                </el-input>
            </el-col>
            <el-col :span="1">
                <el-button icon="el-icon-search" circle @click="loadAll"></el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="normalStall">普通车位</el-button>
                <el-button @click="chargeStall">电车车位</el-button>
            </el-col>
            <el-col :span="6">
                <div class="block">
                    <el-date-picker v-model="chooseTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                        @change="time">
                    </el-date-picker>
                </div>
            </el-col>
        </el-row>

        <!-- 订单 -->
        <el-row style="margin-top: 40px;">
            <el-col :span="2">
                <el-tag>订单：</el-tag>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="24">
                <el-table :data="page.records" stripe style="width: 100%">
                    <el-table-column prop="orderInfoNum" label="订单号" width="180">
                    </el-table-column>
                    <el-table-column prop="userCarPlate" label="车牌号" width="180">
                    </el-table-column>
                    <el-table-column prop="stallInfoNum" label="车位号" width="180">
                    </el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="180">
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="180">
                    </el-table-column>
                    <el-table-column prop="orderAddTime" label="下单时间" width="180">
                    </el-table-column>
                    <el-table-column prop="orderInfoState" label="状态" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.orderInfoState == 0">待支付</span>
                            <span v-if="scope.row.orderInfoState == 2">已付定金</span>
                            <span v-if="scope.row.orderInfoState == 4">支付完成</span>
                            <span v-if="scope.row.orderInfoState == 6">支付完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-view" @click="details(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!-- 订单详情对话框 -->
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
            <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-order"></i>
                        订单号
                    </template>
                    {{ particulars.orderInfoNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-truck"></i>
                        车牌号
                    </template>
                    {{ particulars.userCarPlate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-guide"></i>
                        车位号
                    </template>
                    {{ particulars.stallInfoNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-video-play"></i>
                        开始时间
                    </template>
                    {{ particulars.startTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-switch-button"></i>
                        结束时间
                    </template>
                    {{ particulars.endTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-time"></i>
                        持续时间
                    </template>
                    {{ particulars.endoHour }}小时
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-sold-out"></i>
                        下单时间
                    </template>
                    {{ particulars.orderAddTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-cart-2"></i>
                        总价
                    </template>
                    {{ particulars.orderPrice }}元
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-price-tag"></i>
                        车位类型
                    </template>
                    {{ particulars.stallType }}
                </el-descriptions-item>
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 分页按钮 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="total, prev, pager, next" :page-size="page.size" :total="page.total"
                    @current-change="changePageNum1">
                </el-pagination>
            </el-col>
        </el-row>

        <!-- 超时订单 -->
        <el-row style="margin-top: 20px;">
            <el-col :span="2">
                <el-tag>超时订单：</el-tag>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="24">
                <el-table :data="page2.records" stripe style="width: 100%">
                    <el-table-column prop="orderInfoNum" label="订单号" width="180">
                    </el-table-column>
                    <el-table-column prop="stallInfoNum" label="车位号" width="180">
                    </el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="180">
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="180">
                    </el-table-column>
                    <el-table-column prop="endoHour" label="超时时间" width="180">
                    </el-table-column>
                    <el-table-column prop="payPrice" label="金额" width="180">
                    </el-table-column>
                    <el-table-column prop="payState" label="状态" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.payState == 3">待支付</span>
                            <span v-if="scope.row.payState == 4">支付完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-view" @click="details2(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 超时订单详情对话框 -->
        <el-dialog title="订单详情" :visible.sync="dialogVisible2" width="60%" :before-close="handleClose">
            <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-s-order"></i>
                        订单号
                    </template>
                    {{ particulars.orderInfoNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-guide"></i>
                        车位号
                    </template>
                    {{ particulars.stallInfoNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-video-play"></i>
                        开始时间
                    </template>
                    {{ particulars.startTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-switch-button"></i>
                        结束时间
                    </template>
                    {{ particulars.endTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-time"></i>
                        超过时间
                    </template>
                    {{ particulars.endoHour }}小时
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-cart-2"></i>
                        总价
                    </template>
                    {{ particulars.payPrice }}元
                </el-descriptions-item>
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 分页按钮 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="total, prev, pager, next" :page-size="page2.size" :total="page2.total"
                    @current-change="changePageNum2">
                </el-pagination>
            </el-col>
        </el-row>

        <!-- 退款订单 -->
        <!-- <el-row style="margin-top: 20px;">
            <el-col :span="2">
                <el-tag>退款订单：</el-tag>
            </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-col :span="24">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="订单号" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="车牌号" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="车位号" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="开始时间" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="结束时间" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="下单时间" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="状态" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row> -->
    </div>
</template>

<script>
export default {
    name: "OrderManage",
    data() {
        return {
            particulars: {
                orderInfoNum: "",
                userCarPlate: "",
                stallInfoNum: "",
                startTime: "",
                endTime: "",
                endoHour: null,
                orderAddTime: "",
                orderPrice: null,
                stallType: "",
                payPrice: null
            },
            dialogVisible: false,
            dialogVisible2: false,
            chooseTime: [],
            input: "",
            page: {},
            page2: {},
            PlatformGetOverTimeOrderForm: {
                size: null,
                current: null
            },
            PlatformGetOrderForm: {
                centifiedInfoId: null,
                stallTypeId: null,
                startTime: "",
                endTime: "",
                timeSortId: 0,
                size: null,
                current: null
            }
        }
    },
    methods: {
        details2(obj) {
            this.particulars.orderInfoNum = obj.orderInfoNum
            this.particulars.userCarPlate = obj.userCarPlate
            this.particulars.stallInfoNum = obj.stallInfoNum
            this.particulars.startTime = obj.startTime
            this.particulars.endTime = obj.endTime
            this.particulars.endoHour = obj.endoHour
            this.particulars.orderAddTime = obj.orderAddTime
            this.particulars.payPrice = obj.payPrice
            this.particulars.stallType = obj.stallType
            this.dialogVisible2 = true
        },
        details(obj) {
            this.particulars.orderInfoNum = obj.orderInfoNum
            this.particulars.userCarPlate = obj.userCarPlate
            this.particulars.stallInfoNum = obj.stallInfoNum
            this.particulars.startTime = obj.startTime
            this.particulars.endTime = obj.endTime
            this.particulars.endoHour = obj.endoHour
            this.particulars.orderAddTime = obj.orderAddTime
            this.particulars.orderPrice = obj.orderPrice
            this.particulars.stallType = obj.stallType
            this.dialogVisible = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        cancel() {
            this.dialogVisible = false
            this.dialogVisible2 = false
        },
        changePageNum2(current) {
            this.PlatformGetOverTimeOrderForm.current = current
            this.platformGetOverTimeOrderPage()
        },
        changePageNum1(current) {
            this.PlatformGetOrderForm.current = current
            this.platformGetOrderPage()
        },
        time() {
            this.PlatformGetOrderForm.startTime = this.chooseTime[0]
            this.PlatformGetOrderForm.endTime = this.chooseTime[1]
            this.platformGetOrderPage()
        },
        loadAll() {
            this.PlatformGetOrderForm.startTime = ""
            this.PlatformGetOrderForm.endTime = ""
            this.PlatformGetOrderForm.stallTypeId = null
            this.platformGetOrderPage()
        },
        chargeStall() {
            this.PlatformGetOrderForm.stallTypeId = 2
            this.platformGetOrderPage()
        },
        normalStall() {
            this.PlatformGetOrderForm.stallTypeId = 1
            this.platformGetOrderPage()
        },
        platformGetOrderPage() {
            this.PlatformGetOrderForm.centifiedInfoId = localStorage.getItem("certifiedInfoId")
            this.$http.post("/order/orderInfo/platformGetOrderPage", this.PlatformGetOrderForm).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.page = resp.data.data
                }
            })
        },
        platformGetOverTimeOrderPage() {
            this.PlatformGetOrderForm.centifiedInfoId = localStorage.getItem("certifiedInfoId")
            this.$http.post("/order/orderInfo/platformGetOverTimeOrderPage", this.PlatformGetOverTimeOrderForm).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.page2 = resp.data.data
                }
            })
        }
    },
    created() {
        this.platformGetOrderPage()
        this.platformGetOverTimeOrderPage()
    }
}
</script>

<style scoped></style>